<template>
  <q-page class=" phone-page q-pa-md">
    <div class="" style="font-size: 22px;  margin-top: 80px; font-weight: 600;">欢迎来到安易融</div>
    <div class="q-mt-sm " style="color: #666;font-size: 13px;">手机号一键登录/注册</div>
    <form class=" q-mt-xl">
      <q-input v-model="phone" style="font-size: 16px" placeholder="请输入手机号" />
      <q-input v-model="code" class="q-mt-sm" style="font-size: 16px" placeholder="请输入验证码">
        <template v-slot:append>
          <q-btn
            color="primary"
            @click="sendCode"
            unelevated
            rounded
            flat
            :loading="codeLoading"
            class="normal-case"
            style="font-size: 13px"
            :disable="!!countdown"
            :label="codeText"
          />
        </template>
      </q-input>

      <q-btn
        :loading="loading"
        color="primary"
        unelevated
        :disable="!isApprove || !phone || !code"
        class="full-width q-mt-xl"
        style="border-radius: 8px; transition-duration: 150ms;"
        padding="sm"
        label="登录"
        @click="submit"
      />
    </form>

    <div class="h-[50px]"></div>
  </q-page>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { showToast } from 'vant'
import { useProtocolLink } from 'src/config/protocol_link'
import { useRoute, useRouter } from 'vue-router';
import { sendSmsApi } from 'src/api/user';
import { useAppStore } from 'src/stores/app-store';
import { useLoginHook } from 'src/hooks/login_hook';
// import { useUserStore } from 'src/stores/user-store';


const router = useRouter()
const route = useRoute()

const phone = ref<string>()
const code = ref<string>()
const loading = ref(false)

const isApprove = ref(true)
const codeLoading = ref(false)

const countdown = ref(0)
const codeText = computed(() => {
  if (countdown.value > 0) {
    return `${countdown.value}s`
  }
  return '获取验证码'
})

const ownerId = computed(() => {
  return route.params.id ? +route.params.id : 0
})

if (isNaN(ownerId.value)) {
  router.replace('/error')
}

const sendCode = async () => {
  if (countdown.value) return
  const _phone = `${phone.value ?? ''}`.trim()
  if (!_phone.length) {
    return showToast('请输入手机号')
  }
  if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(_phone)) {
    return showToast('手机号格式不正确')
  }
  codeLoading.value = true;
  await sendSmsApi({ oType: 0, mobile: phone.value }).finally(() => (codeLoading.value = false));
  countdown.value = 60
  const interval = setInterval(() => {
    if (--countdown.value <= 0) clearInterval(interval)
  }, 1000)

  // notyf.success('测试验证码为：'+res.data.code)
}

const submit = async () => {
  const _phone = `${phone.value ?? ''}`.trim()
  if (!_phone.length) {
    return showToast('请输入手机号')
  }
  if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(_phone)) {
    return showToast('手机号格式不正确')
  }
  if (!code.value) {
    return showToast('请输入验证码')
  }


  loading.value = true
  await useAppStore().login(_phone, code.value).finally(() => loading.value = false)
  useLoginHook(router, route).afterLoginHandler();
}
</script>

<style lang="scss" scoped>
.phone-page {
  background: url(src/assets/images/phonelogin/bg.png) no-repeat;
  background-size: 100% auto;
  background-position: top center;
  background-color: #F4F6F9;
}

</style>
